<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <!--
        之前我们基础插槽在组件中只可以指定一个，因为当我们指定多个时内容它也就不知道具体该放哪里了
        如果我们的组件中需要有多个插槽则我们需要使用具名插槽
        具名插槽我们一般配合template标签来使用，并且在标签中使用 “v-slot:插槽名”指定具体的插槽
        v-slot:插槽名 可以简写为 #插槽名
     -->
<div id="app">
    <my-container>
        <template #header>
            <h1>这里是头部元素</h1>
        </template>
        <template #main>
            <div>这里是内容元素</div>
            <div>这里是内容元素</div>
        </template>
        <template #footer>
            <p>这里是尾部元素</p>
        </template>
    </my-container>
</div>

<script>
const {createApp} = Vue
const app = createApp({})

const containerComponent = {
    template:`<div>
    <!-- 具名插槽就是对于插槽指定name属性 -->
    <slot name="header"></slot>
    <hr>
    <slot name="main"></slot>
    <hr>
    <slot name="footer"></slot>
</div>`
}
app.component("my-container",containerComponent)
app.mount("#app")
</script>
</body>
</html>